<template>
    <div id='homepage-wrapper'>
        <Spin fix v-if="spinShow" style="z-index:1999"></Spin>
        <div class="content flex center stretch">
            <!-- 左侧栏 -->
            <div class="left-content">
                <div class="top-title">
                    微信扫码预览
                </div>
                <div class="qcode-wrapper" :style="`background-image: url('${qrcode}');`">
                </div>
                <div class="flex center column-center">
                    <p style="font-size:12px;color:black;margin-right: 10px;">页面路径：<span id="urlText">{{preview_path}}</span></p>
                    <Row type="flex" justify="center">
                        <Button type="primary" size="small" class="copyBtn" data-clipboard-target="#urlText" @click="copyUrl">复制地址</Button>
                    </Row>
                </div>
                <div class="flex flex-wrap component-wrapper center column-center">
                    <p>添加新的组件</p>
                    <Row style='padding: 20px 0;'>
                        <template v-for="item in components">
                            <Col span="8">
                                <div class="item-wrapper">
                                    <Button type="primary" size="default" ghost @click.native='addComponent(item.type,item.title)'>{{item.title}}</Button>
                                </div>
                            </Col>
                        </template>
                    </Row>
                </div>
            </div>
            <!-- 中间预览栏 -->
            <div class="middle-content">
                <div class="component-detail" ref="componentDetail">
                  <!-- 微页面顶部标题 -->
                    <div @click="getTopTitleData">
                        <top-title-module v-if="this.micro_id != 'index'" 
                            :active="label_index==-1"
                            :top-title="microTopTitle"/>
                    </div>                  

                    <draggable v-model="componentList" @end="endDrag" :options="{animation: 150}">
                        <transition-group>
                            <div v-for='(item,index) in componentList' :key="'component'+index" @click="selectComponent(index,item.label_type,item.label_id)">
                                <!-- 轮播组件 -->
                                <banner-module v-if="item.label_type=='bannerChannel'" 
                                        :active="label_index==index"
                                        :module-data="item" 
                                        @delModule="delModule"/>
                                <!-- 快速入口 -->
                                <activity-module v-if="item.label_type=='activityChannel'" 
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 普通组件-->
                                <normal-module v-if="item.label_type=='normalChannel'" 
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 商品列表组件-->
                                <goods-list-module v-if="item.label_type=='goodsList'" 
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 秒杀组件 -->
                                <second-kill-module v-if="item.label_type=='secKillChannel'" 
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 拼团组件 -->
                                <group-module v-if="item.label_type=='hotFightGroupChannel'" 
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 达人卡片 -->
                                <talent-module v-if="item.label_type=='talentChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 图片组件 -->
                                <image-module v-if="item.label_type=='imageCardChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 商品合辑 -->
                                <goods-album-module v-if="item.label_type=='goodsAlbumChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 搜索组件 -->
                                <search-module v-if="item.label_type=='searchChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 文本组件 -->
                                <text-module v-if="item.label_type=='textChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 滑动组件 -->
                                <slider-module v-if="item.label_type=='slideChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 榜单组件 -->
                                <rank-module v-if="item.label_type=='rankChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 分类组件 -->
                                <class-module v-if="item.label_type=='classChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 悬浮组件 -->
                                <suspension-module v-if="item.label_type=='merchantEntryChannel'"
                                                :module-data="item" 
                                                :active="label_index==index"
                                                @delModule="delModule"/>
                                <!-- 抽奖组件 -->
                                <lottery-module v-if="item.label_type=='lotteryChannel'"
                                        :module-data="item" 
                                        :active="label_index==index"
                                        @delModule="delModule"/>

                                <!-- 距离组件 -->
                                <DistanceChannelModule v-if="item.label_type=='distanceChannel'"
                                        :module-data="item" 
                                        :active="label_index==index"
                                        @delModule="delModule"/>
                                <!-- <span v-if="item.label_type=='distanceChannel'">123</span> -->
                            </div>
                        </transition-group>
                    </draggable>	        
                </div>
            </div>
            <!-- 右侧详情栏 -->
            <div class="right-content">
                <Spin fix v-if="spinRightContentShow"  style="z-index:1999"></Spin>
                <!-- 编辑组件 -->
                <edit-common-module :module-data="compomentOneData" @save="saveEdit" />  
            </div>
        </div>

    </div>
</template>

<script>
    import Config from '@/config'

    import Clipboard from 'clipboard'

    import { getOnlineVersion,getPreviewData,getQrcode,updateModule,removeModule,getOneModule,updateEdit,updatePage,addModule,getPageData } from 'api/shopDecoration'

    import { getCache } from 'common/js/util'

    // 拖动插件
  	import draggable from 'vuedraggable'
     //微页面顶部标题组件
    import TopTitleModule from "./components/TopTitleModule/TopTitleModule"

    // 轮播组件
    import BannerModule from "./components/BannerModule/BannerModule"
    // 快速入口
    import ActivityModule from "./components/ActivityModule/ActivityModule"
    // 普通组件
    import NormalModule from "./components/NormalModule/NormalModule"
    // 商品列表组件
    import GoodsListModule from "./components/GoodsListModule/GoodsListModule"
    // 秒杀组件
    import SecondKillModule from "./components/SecondKillModule/SecondKillModule"
    // 拼团组件
    import GroupModule from "./components/GroupModule/GroupModule"
    // 达人卡片
    import TalentModule from "./components/TalentModule/TalentModule"
    // 图片组件
    import ImageModule from "./components/ImageModule/ImageModule"
    // 商品合辑
    import GoodsAlbumModule from "./components/GoodsAlbumModule/GoodsAlbumModule"
    // 搜索组件
    import SearchModule from "./components/SearchModule/SearchModule"
    // 文本组件
    import TextModule from "./components/TextModule/TextModule"
    // 滑动组件
    import SliderModule from "./components/SliderModule/SliderModule"
    // 榜单组件
    import RankModule from "./components/RankModule/RankModule"
    // 分类组件
    import ClassModule from "./components/ClassModule/ClassModule"
    // 悬浮组件
    import SuspensionModule from "./components/SuspensionModule/SuspensionModule"
    // 抽奖组件
    import LotteryModule from "./components/LotteryModule/LotteryModule"
    // 距离组件
    import DistanceChannelModule from "./components/DistanceChannelModule/DistanceChannelModule"

    // 编辑组件
    import EditCommonModule from "./components/EditCommonModule/EditCommonModule"


    export default {
        data() {
            return {
                // 预览二维码
                qrcode: "",

                // 预览loading
                spinShow: false,
                // 右边组件详情预览loading
                spinRightContentShow: false,

                // 组件详情数据
                compomentOneData: {},

                // 选中的模块类型
                label_type: '',
                // 选中的模块索引 -1选中微页面顶部标题
                label_index: 0,
                // 选中模块id
                label_id: 0,

                // 模块数据数组
                componentList: [],

                // 微页面顶部标题
                microTopTitle: "（标题）未设置",

                // 可添加模块数据
                components: [],

                midComponents: [
                   {
                        title: '轮播图',
                        type: 'bannerChannel'
                    },
                    {
                        title: '快速入口',
                        type: 'activityChannel'
                    },
                    {
                        title: '普通组件',
                        type: 'normalChannel'
                    },
                    {
                        title: '秒杀组件',
                        type: 'secKillChannel'
                    },
                    {
                        title: '拼团组件',
                        type: 'hotFightGroupChannel'
                    },
                    {
                        title: '达人卡片',
                        type: 'talentChannel'
                    },
                    {
                        title: '图片组件',
                        type: 'imageCardChannel'
                    },
                    {
                        title: '商品合辑',
                        type: 'goodsAlbumChannel'
                    }   
              ]
            }
        },
        methods: {
            // 复制链接
            copyUrl(){
                let clipboard = new Clipboard('.copyBtn')
                clipboard.on('success', e => {
                    this.$Message.success('复制成功！')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    this.$Message.error('复制失败，请更换浏览器或者手动复制')
                    clipboard.destroy()
                })
            },

            // 拖拽停止
            endDrag: function(event){
                // 拼装组件id数组
                var labelIds = "";
                for (var i = 0; i < this.componentList.length; i++) {
                    labelIds += this.componentList[i].label_id;
                    if (i < (this.componentList.length-1)) {
                        labelIds += ",";
                    }
                }
                // 请求接口 更新组件位置
                updateModule({parent: this.micro_id,labels: labelIds}).then(_res => {
                    this.$Message.success("更新组件成功");
                }).catch(err => {
                    this.$Message.error(err.message);
                })
                
            },
             
            // 获取组件详细数据
            getModuleData(label_id, label_type) {
                this.spinRightContentShow = true;
                getOneModule({labelId: label_id}).then(_res => {
                    this.spinRightContentShow = false;
                    let compomentOneData = {};
                    compomentOneData["data"] = _res.data;
                    compomentOneData["type"] = label_type;
                    this.compomentOneData = compomentOneData;
                    console.log(this.compomentOneData)
                    if (label_type == "textChannel") {
                        eventBus.$emit("uechose");
                    }
                }).catch(err => {
                    this.spinRightContentShow = false;
                    this.$Message.error(err.message);
                })
            },

            // 点击组件事件
            selectComponent(index,label_type,label_id) {
                this.label_index = index;
                this.label_type = label_type;
                this.label_id = label_id;
                // 获取组件数据
                this.getModuleData(label_id, label_type);                
            },

            // 获取微页面顶部标题数据
            getTopTitleData() {
                this.label_index = -1;
                getPageData({labelId: this.micro_id}).then(_res => {
                    if(!_res.data.json){
                        _res.data.json = {
                            image_path: '',
                            share_image: '',
                            text: '',
                        }
                    }
                    this.microTopTitle = _res.data.label_name_cn;
                    var compomentOneData = {};
                    compomentOneData["data"] = _res.data;
                    compomentOneData["data"].version = this.version;
                    compomentOneData["type"] = "topTitleChannel";
                    this.compomentOneData = compomentOneData;
                }).catch(err => {
                    this.$Message.error(err.message);
                })
            },

             // 添加组件
            addComponent(type, title) {
                var that = this;
                this.$Modal.confirm({
                    title: "提示",
                    content: "是否要添加该组件吗？",
                    onOk: () => {
                        addModule({parent:this.micro_id,labelType: type}).then(_res => {
                            that.$Message.success("添加组件成功");
                            getPreviewData({labelId: this.micro_id}).then(_res => {
                                that.componentList = _res.data;
                                that.label_index = that.componentList.length-1;
                                // 滚动到底部
                                setTimeout(function(){
                                    that.$refs.componentDetail.scrollTop = that.$refs.componentDetail.scrollHeight; 
                                },250)
                            }).catch(err => {
                                that.$Message.error(err.message+" 请重新刷新页面");
                            })
                            that.getModuleData(_res.data, type)    
                        }).catch(err => {
                            that.$Message.error(err.message);
                        })
                    }
                });
            },

        		 
            // 删除组件回调
            delModule(moduleData) {
                if(this.componentList.length == 1){
                    this.$Message.error('请最少保留一个组件');
                    return false;
                }
                var that = this;
                this.$Modal.confirm({
                    title: "提示",
                    content: "是否要删除该组件",
                    onOk: () => {
                        that.spinShow = true;
                        removeModule({parent: this.micro_id, labelId: moduleData.label_id}).then(_res => {
                            that.spinShow = false;
                            that.$Message.success("删除组件成功");
                            // 移除删除数据项
                            var index = that.componentList.indexOf(moduleData);
                            if (index > -1) {
                                that.componentList.splice(index, 1);
                            }
                            that.label_index = index == 0 ? 0 : (index-1);
                            that.label_id = that.componentList[that.label_index].label_id;
                            // 重新获取组件数据
                            that.getModuleData(that.label_id, that.componentList[that.label_index].label_type)    
                        }).catch(err => {
                            that.spinShow = false;
                            that.$Message.error(err.message);
                        })
                    }
                });
            },

            // 获取数据
            getData() {
                var that = this;
                that.spinShow = true;
                this.components = this.midComponents.concat();
                
                // 版本控制组件
                let req1 = getOnlineVersion().then(_res=>{
                    this.version = _res.data.onlineVersion;
                    if (this.version == '') {
                        // 审核中 开放全部组件
                        this.components.push({
                            title: '搜索组件',
                            type: 'searchChannel'
                        },
                        {
                            title: '悬浮组件',
                            type: 'merchantEntryChannel'
                        },
                        {
                            title: '文本组件',
                            type: 'textChannel'
                        },
                        {
                            title: '滑动组件',
                            type: 'slideChannel'
                        },
                        {
                            title: '榜单组件',
                            type: 'rankChannel'
                        })
                          
                        if (this.micro_id == "index") {
                            this.components.push({
                                title: '分类组件',
                                type: 'classChannel'
                            })
                        } else {
                            this.wechatAppid = getCache("wechat_app_id");
                            if (this.wechatAppid == "wx8f658b1c23012392" || this.wechatAppid=="wx638f492187c8bfb2") {
                                this.components.push({
                                    title: '分类组件',
                                    type: 'classChannel'
                                })
                            }
                        }   
                        this.components.push({
                            title: '抽奖组件',
                            type: 'lotteryChannel'
                        })        
                    } else {
                        this.wechatAppid = getCache("wechat_app_id");
                        if (this.wechatAppid=="wx638f492187c8bfb2") {
                            this.components.push(
                                {
                                    title: '距离组件',
                                    type: 'distanceChannel'
                                },
                            )
                        }
                        if(this.compareVersion(this.version,"4.1.0725")) {
                            this.components.push({
                                title: '搜索组件',
                                type: 'searchChannel'
                            },
                            {
                                title: '悬浮组件',
                                type: 'merchantEntryChannel'
                            })
                        } 
                        if (this.compareVersion(this.version,"4.4.0807")) {
                            this.components.push(
                            {
                                title: '文本组件',
                                type: 'textChannel'
                            },
                            {
                                title: '滑动组件',
                                type: 'slideChannel'
                            },
                            {
                                title: '榜单组件',
                                type: 'rankChannel'
                            })  
                            if (this.micro_id == "index") {
                                this.components.push({
                                    title: '分类组件',
                                    type: 'classChannel'
                                })
                            } else {
                                this.wechatAppid = getCache("wechat_app_id");
                                if (this.wechatAppid == "wx8f658b1c23012392" || this.wechatAppid=="wx638f492187c8bfb2") {
                                    this.components.push(
                                        {
                                            title: '分类组件',
                                            type: 'classChannel'
                                        },
                                    )
                                }
                            }                        
                        } 
                        if (this.compareVersion(this.version,"4.7.0828")) {
                            this.components.push(
                            {
                                title: '抽奖组件',
                                type: 'lotteryChannel'
                            }) 
                        }
                    }
                   
                }).catch(err=>{
                    this.$Message.error(err.message);
                })
                
                // 预览数据
                let req2 = getPreviewData({labelId: this.micro_id}).then(_res => {
                    that.componentList = _res.data;
                    if(that.micro_id != 'index') {
                      // 微页面直接获取顶部标题数据
                      that.getTopTitleData();
                    } else {
                      if (that.componentList.length == 0) {
                        return;
                      }
                      //  首页直接获取第一个模块数据
                      that.label_id = that.componentList[that.label_index].label_id;
                      this.getModuleData(that.label_id, that.componentList[that.label_index].label_type);
                    }
                }).catch(err => {
                    this.$Message.error(err.message+" 请重新刷新页面");
                })

                // 获取二维码
                let req3 = getQrcode({qrcodePath: this.preview_path}).then(_res => {
                    this.qrcode = _res.data.qrcodePath;
                }).catch(err => {
                    this.$Message.error(err.message);
                })

                // 执行完后关闭loading
                Promise.all([req1, req2, req3]).then(function(res) {
                    that.spinShow = false;
                }).catch(err => {
                    that.$Message.error(err.message?err.message:"请求失败");
                    that.spinShow = false;
                })

            },

            // 保存编辑数据
            saveEdit(data) {
                let that = this;
                var parms = {};
                parms.label_type = data.label_type;
                parms.label_id = data.label_id;
                parms.label_info_summary = data.label_info_summary;
                parms.label_goods = data.label_goods;
                parms.label_name_cn = data.label_name_cn;
                // parms.show_shops = data.show_shops;

                parms.json = JSON.stringify(data.json);

                if (data.updatePage) {
                    if (parms.label_name_cn == '') {
                    this.$Message.error("页面标题不能为空");
                    return;
                    }
                    that.spinShow = true;
                    updatePage(parms).then(_res => {
                        this.$Message.success("保存页面基本信息成功");
                        getPreviewData({labelId: this.micro_id}).then(_res => {
                            that.spinShow = false;
                            this.componentList = _res.data;
                        }).catch(err => {
                            that.spinShow = false;
                            this.$Message.error(err.message+" 请重新刷新页面");
                        })
                    }).catch(err => {
                        that.spinShow = false;
                        this.$Message.error(err.message);
                    })
                } else {
                    // 判断跳转填写信息是否完整
                    if (parms.label_type == 'activityChannel' || parms.label_type == 'bannerChannel' || parms.label_type == 'imageCardChannel' || parms.label_type == 'classChannel') {
                        // 快速入口 轮播组件 图片组件
                        for(let i=0; i<data.json.length; i++) {
                            let item = data.json[i];
                            // if (item.skip_type=='' || item.skip_url == '') {
                            //     this.$Message.error("请填写完整跳转信息");
                            //     return;
                            // }
                        }
                    } else if (parms.label_type == 'goodsAlbumChannel') {
                        // 商品合辑
                        // if (data.json[0].more && data.json[0].more.display=="true" && (data.json[0].skip_type == '' || data.json[0].skip_url == '')) {
                        //     this.$Message.error("请填写完整跳转信息");
                        //     return;
                        // }
                    } else {
                        if (parms.label_type == 'normalChannel' || parms.label_type == 'goodsList' || parms.label_type == 'slideChannel' ) {
                            if (data.label_goods == '') {
                                this.$Message.error("请选择展示商品");
                                return;
                            }
                        }
                        // if (data.json.more && data.json.more.display && (data.json.more.skip_type == '' || data.json.more.skip_url == '')) {
                        //     this.$Message.error("请填写完整跳转信息");
                        //     return;
                        // }
                    }

                    // 判断企业或商品个数是否5-10
                    if (data.isRank) {
                        for (var i=0; i< data.json.length; i++) {
                            if (data.json[i].goods.split(",").length<5||data.json[i].goods.split(",").length>10) {
                                this.$Message.error(data.json[i].rankType=='goods'?'选择5-10个商品':'选择5-10个企业');
                                return;
                            }
                        }
                    }
                    that.spinShow = true;   
                    updateEdit(parms).then(_res => {
                        this.$Message.success("保存组件成功");
                        getPreviewData({labelId: this.micro_id}).then(_res => {
                            that.spinShow = false;
                            this.componentList = _res.data;
                        }).catch(err => {
                            that.spinShow = false;
                            this.$Message.error(err.message+" 请重新刷新页面");
                        })
                    }).catch(err => {
                        that.spinShow = false;
                        this.$Message.error(err.message);
                    })
                }
                
            },

            // 比较版本
            compareVersion(v1, v2) {
                if (!v1 || !v2) {
                    return false;
                }

                v1 = v1.split('.');
                v2 = v2.split('.');
                let len = Math.max(v1.length, v2.length);

                while (v1.length < len) {
                    v1.push('0');
                }
                while (v2.length < len) {
                    v2.push('0');
                }

                for (let i = 0; i < len; i++) {
                    let num1 = parseInt(v1[i]);
                    let num2 = parseInt(v2[i]);

                    if (num1 > num2) {
                        return true;
                    } else if (num1 < num2) {
                        return false;
                    }
                }
                return true;
            }

         },
        created() {
            this.getData();
            if (this.micro_id != 'index') {
              this.components.push({
                title: '商品列表',
                type: 'goodsList'
              })
            }
        },
        computed: {
          // 微页面id index为首页 
          micro_id: function() {
            var micro = this.$route.params.id?this.$route.params.id:"index";
            if (micro != "index") {
              // 微页面
              this.label_index = -1;
            } 
            return micro;
          },
          // 预览路径
          preview_path: function() {
            return this.$route.params.id?"app/mall/label/label?labelId="+this.$route.params.id:"app/mallA/index/index";
          }

        },  
        watch: {
            // 监听路由变化 处理从微页面切换到首页的情况
           '$route' (to, from) {
              if(to.path == "/mall/renovation/wxIndex" && from.path.indexOf('/mall/microPage/allMicroPage') > -1) {
                // 微页面切回首页
                this.label_index = 0;
                this.getData();
              } else {
                // 首页回退微页面 刷新避免页面数据错乱
                this.getData();
              }
           }

            
        },
        components: {
            draggable,TopTitleModule,BannerModule,ActivityModule,NormalModule,GoodsListModule,SecondKillModule,GroupModule,TalentModule,ImageModule,GoodsAlbumModule,SearchModule,TextModule,SliderModule,RankModule,ClassModule,SuspensionModule,LotteryModule,EditCommonModule,DistanceChannelModule
        }
    }
</script>

<style lang='less' scoped>
    #homepage-wrapper {
        width: 100%;
        // padding: 12px 20px 12px 12px;
        height: calc(100vh - 112px);
        position: relative;
    }
    
    /* 内容 */
    .content {
        height: 100%;
        width: 100%;
        overflow-x: auto;
    }
    
    /* 左边内容开始 */
    .left-content {
        width: 350px;
        min-width: 350px;
        border-right: 1px solid #dcdfe6;
        background: white;
        overflow-y: auto;
    }
    .left-content p {
        font-size: 14px;
        text-align: center;
    }
    .left-content .top-title {
        text-align: center;
        font-size: 14px;
        line-height: 16px;
        font-weight: bolder;
        padding: 16px 24px;
        color: #262626;
        border-bottom: 1px solid #e7eaec;
    }
    .qcode-wrapper {
        margin: 20px;
        height: 150px;
        text-align: center;
        background-repeat:no-repeat; background-size:auto 100%;
        background-position: center;
    }

    /* 组件添加按钮 */
    .component-wrapper {}
    .component-wrapper p {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        border-top: 4px solid #dcdee2;
        border-bottom: 1px solid #dcdee2;
        margin-top: 10px;
    }
    .item-wrapper {
        text-align: center;
        margin-bottom: 10px;
    }
    .item-wrapper button {
        min-width: 80px;
    }
    /* 左边内容结束 */
    
    /* 中间内容开始 */
    .middle-content {
        background: white;
        min-width: 360px;
        width: 360px;
        height: 100%;
        margin-left: 24px;
        margin-right: 24px;
        //border-right: 1px solid #dcdfe6;
        padding: 12px;
    }

    /* 组件预览内容 */
    .middle-content .component-detail {
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px solid rgb(248, 248, 248);
        overflow-y: auto;
        transition: all 2s ease;
    }
	
    /* 中间内容结束 */

    /* 右边内容开始 */
  	.right-content {
      min-width: 500px;
      flex: 1;
  	  height: 100%;
      background: white;
      position: relative;
  	}
  	.item-detail {
  		height: 100%;
  	}
  	.select-wrapper {
  		width: 90px; margin-right: 10px;
  	}
  	/*预览内容编辑*/
  	.item-title {
  	    color: #262626;
  	    font-size: 14px;
  	    font-weight: bold;
  	    margin-bottom: 16px;
  	    line-height: 1;
  	    padding: 16px 24px;
  	    border-bottom: 1px solid #f2f2f2
  	}
  	.input-wrapper {
  		width: 70%;
  	}
  	/* 右边内容结束 */

    .wrapper {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .component-wrapper {
      flex: 1;
    }
     .btn-save-wrapper {
        display: flex;
        align-items: center;
      justify-content: center;
        height: 50px;
        border-top: 1px solid #f2f2f2;
     }
     .btn-save {
        color: #fff;
        background-color: #2d8cf0;
        border-color: #2d8cf0;
        padding: 6px 30px 6px 30px;
        font-size: 14px;
        border-radius: 4px;
     }
</style>

